<template>
  <div class="app-container">
    <el-row>
      <!-- 搜索区域 -->
      <el-card style="margin:0 0 5px 5px">
        <el-form :inline="true">
          <el-form-item label="关键词">
            <el-input v-model="queryData.keyword" placeholder="搜索关键词" />
          </el-form-item>
          <el-form-item class="m-l-20">
            <el-button class="filter-item" type="primary" round icon="el-icon-search" @click="handleFilter(true)">
              搜索
            </el-button>
          </el-form-item>
        </el-form>
        <el-form :inline="true">
          <el-form-item>
            <el-checkbox-group v-model="queryData.rules">
              <el-checkbox v-for="rule in optionOfRule" :key="rule.id + '_' + rule.name" :label="rule.id">{{ rule.name }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </el-card>
    </el-row>

    <el-row v-infinite-scroll="loadmore" :gutter="20" :infinite-scroll-disabled="!scrollEnable">
      <el-col :span="24">
        <div class="infinite-list-wrapper w-100" style="overflow:hidden">
          <el-card v-for="(item, index) in items" :key="index + '_' + item.title" style="margin:0 0 5px 5px">
            <div slot="header" class="clearfix">
              <span>{{ item.title }}</span>
            </div>
            <el-row v-if="item.size">
              <el-col :span="4">文件大小：</el-col>
              <el-col :span="18">{{ item.size }}</el-col>
            </el-row>
            <el-row v-if="item.date">
              <el-col :span="4">发布时间：</el-col>
              <el-col :span="18">{{ item.date }}</el-col>
            </el-row>
            <el-row v-if="item.magnet">
              <el-col :span="4">链接地址：</el-col>
              <el-col :span="18"><el-link :href="item.magnet" target="_blank">{{ item.magnet | ellipsis }}</el-link></el-col>
            </el-row>
            <el-row v-if="item.accessCode">
              <el-col :span="4">提取码：</el-col>
              <el-col :span="18">{{ item.accessCode }}</el-col>
            </el-row>
            <el-row v-if="item.files.length > 0" :gutter="20">
              <h5>文件列表</h5>
              <el-row v-for="(file, i) in item.files" :key="i + '_' + file.name" :gutter="20">
                <el-col :span="18">{{ file.name }}</el-col>
                <el-col :span="4">{{ file.size }}</el-col>
              </el-row>
            </el-row>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { magnetSelectData, magnetSearchTable } from '@/api/tool/search'

export default {
  data() {
    return {
      loadingInstance: undefined,
      scrollEnable: false,
      queryData: {
        keyword: undefined,
        rules: []
      },
      current_page: 1,
      items: [],
      optionOfRule: []
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      magnetSelectData().then(response => {
        this.optionOfRule = response.param
      }).catch(() => {})
    },
    handleFilter(init) {
      this.scrollEnable = false
      if (!this.queryData.keyword || this.queryData.rules.length === 0) {
        this.$modal.msgWarning('请选择搜索引擎')
        return
      }
      if (init) {
        this.current_page = 1
        this.items = []
      }
      this.loadingInstance = this.$loading({
        fullscreen: true,
        text: '拼命搜索中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      magnetSearchTable({
        keyword: this.queryData.keyword,
        rules: this.queryData.rules.join(','),
        page: this.current_page
      }).then(response => {
        this.loadingInstance.close()
        this.loadingInstance = undefined
        this.items = this.items.concat(response.param)
        this.scrollEnable = true
      }).catch(e => {
        this.loadingInstance.close()
        this.loadingInstance = undefined
        this.scrollEnable = false
      })
    },
    loadmore() {
      if (this.scrollEnable) {
        this.current_page = this.current_page + 1
        this.handleFilter(false)
      }
    }
  }
}
</script>

<style scoped>
.el-col {
  margin-bottom: 15px;
}
.clearfix:before, .clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
</style>
